<template>
	<view class="classifyView">
		<u-navbar title=" " bgColor="transparent">
			<view slot="left">分类</view>
			<view slot="center" style="color:#fff"></view>
		</u-navbar>
		<view class="classifyCon">
			<view class="search" @tap="toPage('/pages/package/searchView/searchView')">
				<u-icon name="search" size="18" color="#666"></u-icon>
				<view class="ipt">
					请输入产品关键词
				</view>
				<view class="searchText">
					搜索
				</view>
			</view>
			<view class="allShopBox">
				<view class="classifyListBox flex_heng">
					<view class="leftBox">
						<scroll-view class="classifyUl" scroll-y="true" lower-threshold="50" @scrolltolower="classifyLower">
							<view :class="classifyIndex==-1?'classifyItemTwo':'classifyItem'" @tap="classifyItemClick(-1)">
								<text>推荐</text>
							</view>
							<view :class="classifyIndex==index?'classifyItemTwo':'classifyItem'" v-for="(item,index) in classifyList"
								:key="index" @tap="classifyItemClick(index)">
								<text>{{item.sortName}}</text>
							</view>
						</scroll-view>
					</view>
					<view class="rightBox">
						<view class="swiperBox">
							<u-swiper :list="swiperList" indicator keyName="img" circular height="188rpx"
								indicatorActiveColor="#575757" :autoplay="false" @click="swiperClick"></u-swiper>
						</view>

						<scroll-view class="shopUl" :class="classifyIndex==-1?'uiheight':'uiheightTwo'" scroll-y="true"
							lower-threshold="50" @scrolltolower="classifyLower">
							<view class="shopBox" v-for="(item,index) in allShopList" :key="index" @click="goodsClick(item)">
								<view class="shopItembox flex_heng">
									<image :src="item.pic" mode="" class="shopThumb"></image>
									<view class="itemCon flex_shu">
										<view class="itemTag">
											<text v-if="item.tag">{{item.tag}}</text>
										</view>
										<view class="itemName">
											<text class="u-line-1">{{item.title}}</text>
										</view>
										<view class="itemBtm flex_heng">
											<u--text mode="price" :text="item.price" color="#FF483C" size="36rpx"></u--text>
											<image @tap.stop="addCart(item)" :src="imgUrl + 'chat.png'" mode="" class="chatImg"></image>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>


		<u-popup :round="10" :closeOnClickOverlay="false" :show="skuShow" :closeable="true" @close="skuShowClose">
			<view class="specification-popup">
				<view class="one">
					<view class="shopCard flex_heng">
						<view class="cardImg">
							<image :src="popupShopInfo.pic" mode="" class="goodImg"></image>
						</view>
						<view class="cardRight flex_shu">
							<view class="shopName">
								{{detailInfo.title}}
							</view>
							<view class="shopPrice flex_heng">
								<view class="priceSku flex_heng">
									<view class="prcie">
										<text>￥</text><text class="money">{{ totalPrice }}</text>
									</view>
									<view class="cardsku">
										<!-- 商品规格 -->
									</view>
								</view>
								<view class="numberBox">
									<u-number-box integer buttonSize="22" color="#111111" bgColor="#F5F5F5" inputWidth="22" :min="1"
										:max="9999" v-model="goodsCount"></u-number-box>
								</view>
							</view>
						</view>
					</view>

					<view class="skuBox">
						<view class="itemskuBox">
							<view class="itemtypename">
								{{skuNameObj.skuOneName}}
							</view>
							<view class="itemlistBox flex_heng">
								<view class="flex_heng" :class="skuName == item.skuOneValue?'listBoxTwo':'listBox'"
									v-for="(item,index) in AllskuList[0]" :key="index" @click="skuClick(item,index)">
									<view class="listBoxImg">
										<image :src="item.img" mode="" class="skuImg"></image>
									</view>
									<view class="listBoxName">
										{{item.skuOneValue}}
									</view>
								</view>
							</view>
						</view>

						<view class="itemskuBox">
							<view class="itemtypename">
								{{skuNameObj.skuTwoName}}
							</view>
							<view class="itemlistBox flex_heng">
								<view class="flex_heng" :class="skuNameTwo == item.skuTwoValue?'listBoxTwo':'listBox'"
									v-for="(item,index) in skuTwoList" :key="index" @click="skuClickTwo(item,index)">
									<view class="listBoxName">
										{{item.skuTwoValue}}
									</view>
									<view class="listBoxPrice" v-if="item.price">
										￥{{item.price}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="buttonbox">
						<u-button v-if="addType==1" @click="joinCart" shape="circle" type="primary" :plain="true"
							text="加入购物车"></u-button>
						<u-button v-else @click="skuSubmit()" shape="circle" type="primary" text="确 认"></u-button>
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		getSortList,
		getProductList,
		joinInCart,
		getProductById
	} from '@/api/api.js';
	export default {
		computed: {
			totalPrice() {
				return this.popupShopInfo.price * this.goodsCount
			}
		},
		data() {
			return {
				imgUrl: this.$imgUrl,
				swiperList: [],
				classifyIndex: 0,
				classifyList: [],
				classifyName: null,
				sortId: null,
				allShopList: [
					// {
					// 	img: 'goods.png',
					// 	goodsName: '美的清风明月洗烘护一体',
					// 	price: '7899',
					// 	tag: '品牌正品'
					// },
				],
				pageNum: 1,
				moreStatus: 'nomore',

				// 是否显示组件
				skuShow: false,
				// sku列表
				cartValue: 0,
				shadowStyle: {
					backgroundImage: "none",
					paddingTop: "0",
					marginTop: "20rpx"
				},
				detailInfo: {},

				goodsCount: 1,
				// 弹框商品信息
				popupShopInfo: {},

				AllskuList: [],
				skuNameObj: {},
				skuTwoList: [],

				skuName: '',
				skuNameTwo: '',
				addType: 0,
			};
		},
		// 下拉刷新的事件
		onPullDownRefresh() {

		},
		// 触底的事件
		onReachBottom() {
			this.pageNum++;
			this.getProductList({
				sortId: this.sortId
			});
		},
		onLoad() {},
		onShow() {
			// this.getClassifyData()
			// this.getHomeBannerList();
			this.pageNum = 1;
			this.allShopList = [];
			this.getSortList();
		},
		onHide() {

		},
		watch: {

		},
		methods: {
			skuShowClose() {
				this.skuShow = false;
			},
			getSortList() {
				getSortList().then(res => {
					if (res.code == 200) {
						console.log('res', res)
						this.classifyList = res.data
						this.classifyName = this.classifyList[0].sortName;
						this.sortId = this.classifyList[0].id
						this.getProductList({
							sortId: this.sortId
						})
					}
				})
			},
			getProductList(params) {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				getProductList({
					pageNum: this.pageNum,
					pageSize: 20,
					...params
				}).then(res => {
					console.log(res);
					if (res.rows.length > 0) {
						this.allShopList = [...this.allShopList, ...res.rows];
					}
				}).finally(() => {
					this.moreStatus = 'nomore'
					uni.hideLoading()
				})
			},


			//分类选中
			classifyItemClick(index) {
				console.log('index', index)
				this.classifyIndex = index;
				this.pageNum = 1;
				this.allShopList = [];
				this.sortId = this.classifyList[this.classifyIndex].id
				this.getProductList({
					sortId: this.sortId
				})
				// let queryData = {
				// 	dadId: null
				// }
				// if (index != -1) {
				// 	queryData.dadId = this.classifyList[this.classifyIndex].id;
				// 	this.classifyName = this.classifyList[index].sortName;

				// 	uni.setStorageSync('dadId', queryData.dadId)
				// } else {
				// 	queryData.dadId = 0;
				// 	this.classifyName = '推荐';
				// 	uni.setStorageSync('dadId', queryData.dadId)
				// }
				// this.getSonList(queryData)
			},
			//分类列表到底
			classifyLower() {
				console.log('分类列表到底')
			},


			//点击商品
			goodsClick(item) {
				uni.navigateTo({
					url: `/pages/package/goodsDetail/goodsDetail?goodsId=${item.id}`
				})
			},

			getList() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				this.getProductList({
					pageNum: this.page,
					pageSize: 10,
				})
			},


			//获取商城一级分类列表
			getHomeTypeList() {
				const params = {
					type: 1,
					dadId: 0,
				}
				getTypeList({
					params
				}).then(res => {
					if (res.code == 200) {
						this.goodsTypeList = res.data
					}
				})
			},

			//获取商城轮播图
			getHomeBannerList() {
				const params = {
					//sceneType =1 首页
					sceneType: 2, //商城
				}
				getBannerList({
					params
				}).then(res => {
					if (res.code == 200) {
						// this.swiperList = res.rows.map(item => {
						// 	return item.img
						// })
						this.swiperList = res.data
						console.log('轮播图', this.swiperList)
					}
				})
			},

			//轮播图点击
			swiperClick(e) {
				let swiperInfo = this.swiperList[e];
				let goodsId = this.swiperList[e].productId;
				console.log('swiperInfo', swiperInfo)
				if (swiperInfo.type == 1) {
					uni.navigateTo({
						url: `/package/pages/goodsDetail/goodsDetail?goodsId=${goodsId}`
					})
				} else {
					uni.setStorageSync('announCon', swiperInfo.txt)
					uni.navigateTo({
						url: `/package/pages/announ/announ`
					})
				}

			},

			swiperChange(e) {
				this.swiperIndex = e.current
			},
			toPage(url) {
				uni.navigateTo({
					url
				})
			},
			buyGoods() {

				console.log(this.swiperIndex);
				// this.swiperList[this.swiperIndex]
			},
			//添加购物车
			addCart(item) {


				getProductById(item.id).then(res => {
					this.detailInfo = res.data;
					console.log(res.data);
					this.addType = 1
					this.AllskuList = JSON.parse(res.data.data)
					this.skuNameObj = JSON.parse(res.data.data1)
					this.skuName = this.AllskuList ? this.AllskuList[0][0].skuOneValue : ''
					this.skuTwoListChange(this.skuName)
					this.skuShow = true
				})




			},

			//加入购物车
			joinCart() {
				if (!uni.getStorageSync('userInfo')) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					return;
				}
				uni.showLoading({
					title: '请稍候...',
					mask: true
				})
				const params = {
					appUserId: uni.getStorageSync('userInfo').id,
					num: this.goodsCount,
					skuId: this.popupShopInfo.id,
					productId: this.popupShopInfo.productId,
				}
				joinInCart(params).then(res => {
					console.log('res', res);
					uni.$u.toast('添加购物车成功');
					this.skuShow = false;
					uni.hideLoading();
					// this.getCartListData();

					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/package/shoppingCart/shoppingCart'
						})
					}, 1000)

				})
			},


			//规格一点击
			skuClick(skuItems, skuIndex) {
				this.skuName = skuItems.skuOneValue;
				this.skuTwoListChange(this.skuName);
			},

			// 规格二变化
			skuTwoListChange(skuOneName) {
				const newSkulist = this.detailInfo.skuList.filter(item => item.skuOneValue == this.skuName);
				this.skuTwoList = newSkulist;
				this.skuNameTwo = newSkulist[0].skuTwoValue;
				this.skuClickTwo(newSkulist[0], 0);
			},

			//规格二点击
			skuClickTwo(skuItems, skuIndex) {
				this.skuNameTwo = skuItems.skuTwoValue;
				// this.skuTwoList
				this.popupShopInfo = skuItems;
				console.log('this.popupShopInfo ', this.popupShopInfo)
			},

			//跳转购物车
			goshopCart() {
				uni.navigateTo({
					url: `/package/pages/shoppingCart/shoppingCart`
				})
			},



			skuSelect() {
				this.addType = 0;
				// this.skuName = this.AllskuList ? this.AllskuList[0][0].skuOneValue : '';
				// this.skuTwoListChange(this.skuName);
				this.skuShow = true;
			},
			skuSubmit() {
				this.skuShow = false;
			}
		}
	};
</script>

<style lang="scss">
	.classifyView {
		width: 100%;
		min-height: 100vh;
		background: #fff;
		// position: relative;

		.classifyCon {
			width: 100%;
			margin-top: 200rpx;
			// height: 100%;
			// padding: 200rpx 0 40rpx;
			// box-sizing: border-box;

			.search {
				margin: auto;
				width: 694rpx;
				height: 84rpx;
				border-radius: 310rpx;
				opacity: 1;
				background: #ffffff;
				backdrop-filter: blur(20rpx);
				display: flex;
				align-items: center;
				position: relative;
				padding-left: 20rpx;
				box-sizing: border-box;
				border-radius: 156rpx;
				opacity: 1;
				border: 2rpx solid #000000;

				.ipt {
					margin-left: 8rpx;
					font-size: 26rpx;
					color: #999;
				}

				.searchText {
					position: absolute;
					top: 50%;
					right: 26rpx;
					transform: translate(0, -50%);
					color: #999999;
					text-align: left;
					font-size: 28rpx;
					font-weight: 500;
					font-family: "Alibaba PuHuiTi 2.0";
				}
			}

			.allShopBox {
				width: 100%;
				height: 100%;

				.classifyListBox {
					width: 100%;
					height: 100%;
					margin-top: 24rpx;

					display: flex;
					justify-content: flex-start;
					align-items: flex-start;

					.leftBox {
						width: 188rpx;
						height: 100%;
						background: linear-gradient(180deg, #f7f7f700 0%, #f9f9f9 100%);

						.classifyUl {
							width: 100%;
							height: 100%;



							.classifyItem {
								color: #333333;
								font-size: 28rpx;
								font-weight: 400;
								font-family: "Alibaba PuHuiTi 2.0";
								text-align: center;
								margin-bottom: 48rpx;
								height: 56rpx;
								line-height: 56rpx;
								border-radius: 8rpx;
							}

							.classifyItemTwo {
								width: 144rpx;
								height: 56rpx;
								line-height: 56rpx;
								text-align: center;
								border-radius: 8rpx;
								opacity: 1;
								background: linear-gradient(-49.9deg, #00bf39 0%, #34dfa3 100%);
								font-size: 28rpx;
								font-weight: 500;
								font-family: "Alibaba PuHuiTi 2.0";
								margin: 0 auto;
								margin-bottom: 48rpx;

								text {
									color: #FFFFFF;
								}
							}
						}
					}

					.rightBox {
						width: calc(100% - 188rpx);
						height: 100%;
						padding: 0 48rpx;
						box-sizing: border-box;

						.swiperBox {
							width: 100%;
							height: 188rpx;
						}

						.shopUl {
							width: 100%;

							.shopBox {
								width: 100%;

								.shopItembox {
									margin-top: 16rpx;
									width: 100%;

									.shopThumb {
										width: 160rpx;
										height: 160rpx;
									}

									.itemCon {
										width: calc(100% - 180rpx);
										height: 160rpx;
										align-items: flex-start;
										justify-content: space-around;

										.itemTag {
											text {
												border-radius: 8rpx;
												opacity: 1;
												background: #000000;
												color: #f6ce55;
												font-size: 20rpx;
												font-weight: 600;
												font-family: "Alibaba PuHuiTi 2.0";
												padding: 4rpx;
											}
										}

										.itemName {
											color: #000000;
											font-size: 28rpx;
											font-weight: 500;
										}

										.itemBtm {
											width: 100%;

											.chatImg {
												width: 48rpx;
												height: 48rpx;
											}
										}
									}

								}

							}
						}

						.uiheight {
							height: calc(100% - 268rpx);
							margin-top: 20rpx;
						}

						.uiheightTwo {
							height: 100%;
						}
					}
				}
			}
		}
	}

	.specification-popup {
		width: 100%;

		.one {
			width: 100%;
			padding: 0 0rpx 20rpx;
			box-sizing: border-box;

			.shopCard {
				width: 100%;
				height: 160rpx;
				background: #FFFFFF;

				.cardImg {
					width: 160rpx;
					height: 160rpx;

					.goodImg {
						width: 160rpx;
						height: 160rpx;
					}
				}

				.cardRight {
					width: calc(100% - 160rpx);
					height: 160rpx;
					margin-left: 28rpx;

					.shopName {
						width: 100%;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 500;
						font-size: 28rpx;
						color: #111111;
						color: #666666;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.shopPrice {
						width: 100%;

						.priceSku {
							align-items: flex-end;

							.prcie {
								font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
								font-weight: 500;
								font-size: 28rpx;
								color: red;

								.money {
									font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
									font-weight: 500;
									font-size: 48rpx;
									color: red;
									margin-left: 6rpx;
								}
							}

							.cardsku {
								margin-left: 12rpx;
								font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
								font-weight: 300;
								font-size: 24rpx;
								color: #888888;
							}
						}

						.numberBox {
							.u-number-box__minus {
								width: 22px !important;
							}

							.u-number-box__plus {
								width: 22px !important;
							}
						}
					}
				}
			}

			.skuBox {
				width: 100%;
				min-height: 500rpx;
				background: #F5F9FF;

				.itemskuBox {
					width: 100%;
					padding: 20rpx 32rpx;
					box-sizing: border-box;

					.itemtypename {
						font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
						font-weight: 300;
						font-size: 24rpx;
						color: #666666;
					}

					.itemlistBox {
						width: 100%;
						flex-wrap: wrap;
						padding-top: 20rpx;
						justify-content: flex-start;

						.listBox {
							min-width: 200rpx;
							padding: 0 20rpx 0 0;
							box-sizing: border-box;
							height: 60rpx;
							background: #FFFFFF;
							border-radius: 8rpx;
							justify-content: flex-start;
							margin-bottom: 20rpx;
							overflow: hidden;
							margin-right: 20rpx;

							.listBoxImg {
								width: 60rpx;
								height: 60rpx;
								background: #FFFFFF;

								.skuImg {
									width: 60rpx;
									height: 60rpx;
								}
							}

							.listBoxName {
								margin-left: 20rpx;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 24rpx;
								color: #111111;
							}

							.listBoxPrice {
								margin-left: 20rpx;
								font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
								font-weight: 500;
								font-size: 24rpx;
								color: #111111;
							}
						}

						.listBoxTwo {
							min-width: 198rpx;
							padding: 0 20rpx 0 0;
							box-sizing: border-box;
							height: 60rpx;
							background: #FFFFFF;
							border-radius: 8rpx;
							justify-content: flex-start;
							margin-bottom: 20rpx;
							overflow: hidden;
							border: 1rpx solid #00bf39;
							margin-right: 20rpx;

							.listBoxImg {
								width: 60rpx;
								height: 60rpx;
								background: #FFFFFF;

								.skuImg {
									width: 60rpx;
									height: 60rpx;
								}
							}

							.listBoxName {
								margin-left: 20rpx;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 24rpx;
								color: #111111;
							}

							.listBoxPrice {
								margin-left: 30rpx;
								font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
								font-weight: 500;
								font-size: 24rpx;
								color: #111111;
							}

						}
					}
				}
			}

			.buttonbox {
				width: 100%;
				height: 80rpx;

				.u-button {
					width: 686rpx;
					height: 80rpx;
					background: linear-gradient(-49.9deg, #00bf39 0%, #34dfa3 100%);
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: none;
					color: #fff;
				}
			}

		}
	}
</style>